<template>
  <div>
    <div class="row">
      <div class="col-5" style="min-height:400px;border-right:1px solid #ccc;">
        <q-tabs
          v-model="caTab"
          dense
          inline-label
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="left"
          :breakpoint="0"
          narrow-indicator
        >
          <q-tab name="tab1"  label="品类树" />
        </q-tabs>
        <q-separator />
        <q-tab-panels v-model="caTab" animated>
          <q-tab-panel class="q-pa-none" name="tab1">
            <q-splitter
              v-model="splitterModel"
              style="width:100%"
              >
              <template v-slot:before style="width:30%;min-height:400px;">
                <q-tabs
                  style=""
                  v-for="(data,index) in classificationdata"
                  :key="index"
                  v-model="tab"
                  vertical
                  dense
                  align="left"
                  class="text-teal"
                >
                  <q-tab  :name="data.id" :label="data.name" />
                </q-tabs>
              </template>
              <template v-slot:after>
                <q-tree
                  style="margin:10px 0 10px 40px;"
                  :filter="filter"
                  :nodes="data"
                  no-nodes-label="找不到匹配数据!"
                  node-key="id"
                  color="primary"
                  label-key="name"
                  selected-color="primary"
                  :selected.sync="selected"
                  ref="trees"
                  :expanded.sync="nodeExpand">
                </q-tree>
                <!-- <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps"
                  ref="tree"
                  check-strictly
                  :current-node-key="selected"
                  @current-change="handleNodeClick"
                  @check-change="handleCheckChange"
                  :default-checked-keys="ticked"></el-tree> -->
              </template>
            </q-splitter>
          </q-tab-panel>
        </q-tab-panels>
      </div>
      <div class="col-7">
        <q-tabs
          v-model="TaTab"
          dense
          inline-label
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="left"
          :breakpoint="0"
          narrow-indicator
        >
          <q-tab name="tab1"  label="供方品项地点关系" />
        </q-tabs>
        <q-separator />
        <q-tab-panels v-model="TaTab" animated>
          <q-tab-panel class="q-pa-none" name="tab1">
            <q-table
              class="bg-white shadow-1"
              :data="dataTab"
              dense
              :columns="columns"
              row-key="id"
              separator="cell"
              selection="single"
              :selected.sync="selectedTab"
              :visible-columns="visibleColumns"
              :filter="searchForm"
              :pagination.sync="pagination"
              :rows-per-page-options="[3, 5, 10, 20]"
              no-data-label="暂无数据"
              table-class="h-custom"
            >
              <template v-slot:top-left="props">
                <!-- <q-btn size="sm" color="light-blue" :label="$t('新增')" @click="add"/> -->
                <!-- <q-btn size="sm" color="negative" :label="$t('删除')" class="q-ml-sm"/> -->
              </template>
              <template v-slot:top-right="props">
                <q-select
                  v-model="visibleColumns"
                  multiple
                  borderless
                  options-dense
                  :display-value="$t('显示列')"
                  emit-value
                  map-options
                  :options="columns"
                  option-value="name"
                  class="q-mx-lg"
                >
                  <template v-slot:option="scope">
                    <q-item
                      v-bind="scope.itemProps"
                      v-on="scope.itemEvents"
                      v-if="!scope.opt.required"
                    >
                      <q-item-section avatar>
                        <q-toggle color="blue" v-model="visibleColumns" :val="scope.opt.name" />
                      </q-item-section>
                      <q-item-section style="min-width:60px">
                        {{ scope.opt.label }}
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
                <q-toggle
                  v-model="searchToggle"
                  left-label
                  label="搜索"
                  color="blue"
                  checked-icon="check"
                  unchecked-icon="clear"
                  keep-color
                />
                <q-btn
                  flat round dense
                  :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                  @click="props.toggleFullscreen"
                  class="q-ml-md"
                />
              </template>
              <template v-if="searchToggle" v-slot:top-row="props">
                <q-tr :props="props">
                  <q-td>
                    <q-btn color="primary" dense flat icon="search"/>
                  </q-td>
                  <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
                    <!-- <q-btn color="primary" dense flat icon="search" class="absolute-center" v-if="col.name==='action'"/> -->
                    <q-input dense outlined v-model="searchForm[col.name]"/>
                  </q-td>
                </q-tr>
              </template>
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th>
                    <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
                  </q-th>
                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.label }}
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td width="52">
                    <q-checkbox dense v-model="props.selected" />
                  </q-td>
                  <q-td key="itemCode" :props="props">
                    <span class="text-light-blue cursor-pointer">{{ props.row.itemCode  }}</span>
                  </q-td>
                  <q-td key="itemName" :props="props">{{ props.row.itemName }}</q-td>
                  <q-td key="siteCode" :props="props">{{ props.row.siteCode }}</q-td>
                  <q-td key="groupName" :props="props">{{ props.row.groupName }}</q-td>
                  <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                </q-tr>
                <q-tr v-show="props.expand" :props="props">
                  <q-td colspan="100%">
                  </q-td>
                </q-tr>
              </template>
              <template v-slot:pagination="props">
                <q-pagination
                  v-model="pagination.page"
                  color="blue"
                  :max-pages="5"
                  :max="pages"
                  :boundaryLinks="true"
                  :directionLinks="true"
                />
                共 {{ total }} 条
              </template>
            </q-table>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
  </div>
</template>

<script>
import { transformToTreeFormat } from 'src/utils/fns'
export default {
  props: {
    tenantId: {},
    value: {}
  },
  data () {
    return {
      classificationdata: [],
      splitterModel: 20,
      caTab: 'tab1',
      TaTab: 'tab1',
      data: [],
      ticked: [],
      filter: '',
      tickStrategy: 'strict',
      selected: '',
      nodeExpand: [],
      nodeSelected: '',
      searchToggle: false,
      searchForm: {
        itemCode: '',
        itemName: '',
        siteCode: '',
        groupName: '',
        createTime: ''
      },
      selectedTab: [],
      visibleColumns: [
        'itemCode',
        'itemName',
        'siteCode',
        'groupName',
        'createTime'
      ],
      tab: '',
      // 当加入 required: true 属性时  visibleColumns 对当前字段无效
      columns: [
        { name: 'itemCode', required: true, label: '品项编码', align: 'left', field: 'code', sortable: true },
        { name: 'itemName', required: true, label: '品项名称', align: 'left', field: 'name', sortable: true },
        { name: 'siteCode', required: true, label: '品项地点', align: 'left', field: 'code', sortable: true },
        { name: 'groupName', required: true, label: '品项组', align: 'left', field: 'name', sortable: true },
        { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
      ],
      dataTab: [],
      total: 0,
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: Boolean
      }
    }
  },
  created () {
    this.getleft()
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pagination.rowsPerPage)
    }
  },
  watch: {
    'selectedTab': {
      handler () {
        this.$emit('changeItem', this.selectedTab)
      },
      deep: true
    },
    'tab' () {
      this.getTree()
    },
    'selected' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    'pagination.page' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    }
  },
  methods: {
    init () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    },
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: `/mdm/item/site/findByCategory`,
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          categoryId: this.selected,
          sort: sortBy,
          ...filter,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : '')
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(this.value)
          if (this.value !== '') {
            data.list.forEach(item => {
              if (item.id === this.value) {
                this.selectedTab.push(item)
              }
            })
          }
          console.log(data)
          this.total = data.total
          this.dataTab = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: `/mdm/category/query`,
        params: {
          categoryTypeId: this.tab,
          tenantId: this.tenantId
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          // console.log(data)
          let datas = data
          datas.forEach(item => {
            this.nodeExpand.push(item.id)
            item.tickable = this.tickable
            item.name = String(item.code) + '-' + String(item.name)
          })
          let nodesCat = transformToTreeFormat(datas, 'id', 'parentId', 'children')
          this.data = nodesCat
          console.log(this.data)
          this.selected = this.data[0].id
          console.log(data[0].id)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async getleft () {
      if (this.tenantId.length === 0) {
        this.tenantId = 0
      }
      await this.$api({
        method: 'post',
        url: `/mdm/categoryType/query`,
        params: {
          tenantId: this.tenantId,
          pageSize: 100,
          pageNo: 1
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          this.classificationdata = data.list
          this.tab = data.list[0].id
          console.log(this.tab)
          this.getTree()
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  /deep/ .q-splitter__before
    width 35% !important
    margin-left 20px
    min-height 200px
</style>
